<script lang="ts" setup>
import type { DataType } from './types';

import type { VxeGridProps } from '#/adapter/vxe-table';
import { $t } from '@vben/locales';
import { Page } from '@vben/common-ui';

import { Button, DatePicker, Select, Space } from 'ant-design-vue';
import dayjs from 'dayjs';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getVisit } from '#/api/portal/visit';

defineOptions({
  name: 'PortalAdminTag',
});

const router = useRouter();
const routeMeta = router.currentRoute.value.meta;
const viewTitle = routeMeta.title.replace('管理', '');
const searchDate = ref(dayjs(new Date()));
const options = [
  { value: 'Baidu', label: 'Baidu' },
  { value: 'Google', label: 'Google' },
  { value: 'Google Adsense', label: 'Google Adsense' },
  { value: 'Sogou', label: 'Sogou' },
  { value: 'Sogou web', label: 'Sogou web' },
  { value: 'SOSO', label: 'SOSO' },
  { value: 'Yahoo', label: 'Yahoo' },
  { value: 'MSN', label: 'MSN' },
  { value: 'msnbot', label: 'msnbot' },
  { value: 'Sohu', label: 'Sohu' },
  { value: 'Yodao', label: 'Yodao' },
  { value: 'Twiceler', label: 'Twiceler' },
  { value: 'Alexa_', label: 'Alexa_' },
  { value: 'Alexa', label: 'Alexa' },
  { value: '雅虎', label: '雅虎' },
  { value: '其它蜘蛛', label: '其它蜘蛛' },
  { value: '用户', label: '用户' },
  { value: 'Baidu', label: 'Baidu' },
  { value: 'Baidu', label: 'Baidu' },
];
const bot = ref();

const gridOptions: VxeGridProps<DataType> = {
  rowConfig: {
    isHover: true,
  },
  columns: [
    { field: 'id', title: $t('page.common.Code') },
    { field: 'bot', title: $t('admin.searchEngine') },
    { field: 'url', title: $t('admin.visitLink'), slots: { default: 'url' } },
    { field: 'visite_ip', title: $t('admin.visitorIP') },
    {
      field: 'create_time',
      title: $t('admin.visitTime'),
      formatter: 'formatShortDateTime',
    },
  ],
  height: 'auto',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        const { data } = await getVisit({
          page: page.currentPage,
          limit: page.pageSize,
          searchDate: dayjs(searchDate.value),
          bot: bot.value,
        });
        return data;
      },
    },
  },
  toolbarConfig: {
    custom: true,
    // export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid, GridApi] = useVbenVxeGrid({
  gridOptions,
});
</script>

<template>
  <Page auto-content-height>
    <Grid :table-title="`${viewTitle} `+$t('page.common.List')">
      <template #toolbar-tools>
        <Space>
          <DatePicker
            v-model:value="searchDate"
            format="YYYY-MM-DD"
            mode="date"
            @change="GridApi.reload()"
          />
          <Select
            v-model:value="bot"
            :options="options"
            placeholder="选择搜索引擎"
            style="width: 220px"
            @change="GridApi.reload()"
          />
        </Space>
      </template>

      <template #url="{ row }">
        <Button :href="row.url" :text="row.url" target="_blank" type="link" />
      </template>
    </Grid>
  </Page>
</template>
